<template>
    <view class="page-wrap">
        <swiper class="swiper_box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration">
            <block v-for="(item, index) in banners" :key="index">
                <swiper-item @tap="gotoNext" :data-item="item">
                    <image class="swiper_img" :src="item.pic"></image>
                </swiper-item>
            </block>
        </swiper>
        <view class="flexs align-center padding-sm justify-between">
            <view class="search flexs align-center radiues padding-lr padding-tb box-sizing" @tap="gotoSearch">
                <image class="search_img1" src="/static/images/shop/1.png"></image>
                <view class="text-dm padding-left-xs text-darkGrey">输入想买的宝贝</view>
            </view>
            <image class="search_img2" :src="mallimgUrl + 'shopcar.png'" @tap.stop.prevent="gotoShopcar"></image>
        </view>
        <view class="margin-lr-sm margin-bottom-sm bg-white radius padding-bottom flexs align-center flex-wrap"
            style="box-shadow: 2px 4px 8px 0px #f5f5f5">
            <view @tap="gotoItemIndex" :data-id="item.id" :data-item="item"
                class="classify_box padding-top flexs flex-direction align-center" v-for="(item, index) in toolbarList"
                :key="index">
                <image class="classify_img radiues" :src="item.icon" />

                <text class="padding-top-sm text-df">{{ item.name }}</text>
            </view>
        </view>
        <block v-if="isRelease">
            <image :src="mallimgUrl + 'yd.png'" class="banner_img2 margin-lr-sm margin-bottom-sm" @tap="goyidou">
            </image>
        </block>
        <!-- <view class="shopping-short-cut-bar">
    <view class="shopping-short-cut-item" bindtap="gotoNext" data-url="{{subject1.url}}">
      <image src="{{subject1.pic}}" ></image>
    </view>
    <view class="shopping-short-cut-item shopping-short-cut-item-1">
      <image src="{{subject2.pic}}" bindtap="gotoNext" data-url="{{subject2.url}}"></image>
      <image src="{{subject3.pic}}" bindtap="gotoNext" data-url="{{subject3.url}}"></image>
    </view>
  </view> -->

        <view :class="'column ' + (isFixedTop ? 'totop' : '')" id="navbar">
            <view class="flexs align-center padding-lr-xs" style="height: 70rpx">
                <view class="padding-lr" @tap="queryListByType" data-index="1">
                    <view :class="'margin-bottom-xs ' + (active == 1 ? 'text-xl text-bold' : 'text-df')">推荐</view>
                    <view :class="active == 1 ? 'bg-orange bar_box radius' : ''"></view>
                </view>
                <view class="padding-lr" @tap="queryListByType" data-index="2">
                    <view :class="'margin-bottom-xs ' + (active == 2 ? 'text-xl text-bold' : 'text-df')">热卖</view>
                    <view :class="active == 2 ? 'bg-orange bar_box radius' : ''"></view>
                </view>
                <view class="padding-lr" @tap="queryListByType" data-index="3">
                    <view :class="'margin-bottom-xs ' + (active == 3 ? 'text-xl text-bold' : 'text-df')">新品</view>
                    <view :class="active == 3 ? 'bg-orange bar_box radius' : ''"></view>
                </view>
                <view class="padding-lr" @tap="queryListByType" data-index="5">
                    <view :class="'margin-bottom-xs ' + (active == 5 ? 'text-xl text-bold' : 'text-df')">自提商品</view>
                    <view :class="active == 5 ? 'bg-orange bar_box radius' : ''"></view>
                </view>
                <view class="padding-lr" @tap="toGiftPacks">
                    <view class="margin-bottom-xs text-df">创客大礼包</view>
                </view>
            </view>
        </view>
        <view class="column" v-if="isFixedTop"></view>

        <view class="flexs justify-between padding-lr-sm padding-bottom">
            <view>
                <view class="goods_info radius margin-top-sm bg-white" v-if="index % 2 == 0" @tap="toDetail"
                    :data-goodsid="item.id" :data-url="item.url" :data-type="item.type" :data-productSn="item.productSn"
                    :data-goodsType="item.goodsType" v-for="(item, index) in goodslist" :key="index">
                    <view class="p-r">
                        <image class="goods_img" mode="widthFix" :src="item.pic" />
                        <view class="goods_sold padding-lr-sm text-sm text-white" v-if="item.sale">已售: {{ item.sale }}
                        </view>
                    </view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view class="flexs align-center padding-lr-sm padding-bottom-xs flex-wrap">
                        <view v-if="item.price && item.price > 0"
                            class="text-price text-red text-df text-bold padding-right-sm">{{ item.price }}</view>
                        <view class="text-red text-df text-bold padding-right-sm">
                            <block v-if="item.integration && item.price && item.price > 0" class="text-red">+</block>
                            <text v-if="item.integration">{{ item.integration }}意豆</text>
                        </view>
                        <view class="text-price text-darkGray text-sm text-through"
                            v-if="item.originalPrice && !item.priceMaker">{{ item.originalPrice }}</view>
                        <view class="markerpic" v-if="item.priceMaker" @tap.stop.prevent="getMarkerDetails">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">￥{{ item.priceMaker }}</text>
                        </view>
                    </view>

                    <view class="padding-lr-sm padding-bottom-sm text-sm text-orange"
                        v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>

                    <view style="width: max-content" class="padding-lr-sm padding-bottom-sm text-sm"
                        v-if="item.distributionType != 1 && item.distributionType">
                        <text v-if="item.distance < 1000">最近自提门店距您{{ item.distance }}m</text>
                        <text v-if="item.distance >= 1000">最近自提门店距您{{ item.newdistance }}km</text>
                    </view>
                </view>
            </view>
            <view>
                <view class="goods_info radius margin-top-sm bg-white" v-if="index % 2 == 1" @tap="toDetail"
                    :data-url="item.url" :data-goodsid="item.id" :data-type="item.type" :data-productSn="item.productSn"
                    :data-goodsType="item.goodsType" v-for="(item, index) in goodslist" :key="index">
                    <view class="p-r">
                        <image class="goods_img" mode="widthFix" :src="item.pic" />
                        <view class="goods_sold padding-lr-sm text-sm text-white" v-if="item.sale">已售: {{
                            item.sale || 0
                        }}</view>
                    </view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view class="flexs align-center padding-lr-sm padding-bottom-xs flex-wrap">
                        <view v-if="item.price && item.price > 0"
                            class="text-price text-red text-df text-bold padding-right-sm">{{ item.price }}</view>
                        <view class="text-red text-df text-bold padding-right-sm">
                            <block v-if="item.integration && item.price && item.price > 0" class="text-red">+</block>
                            <text v-if="item.integration">{{ item.integration }}意豆</text>
                        </view>
                        <view class="text-price text-darkGray text-sm text-through"
                            v-if="item.originalPrice && !item.priceMaker">{{ item.originalPrice }}</view>
                        <view class="markerpic" v-if="item.priceMaker" @tap.stop.prevent="getMarkerDetails">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">￥{{ item.priceMaker }}</text>
                        </view>
                    </view>

                    <view class="padding-lr-sm padding-bottom-sm text-sm text-orange"
                        v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>

                    <view style="width: max-content" class="padding-lr-sm padding-bottom-sm text-sm"
                        v-if="item.distributionType != 1 && item.distributionType">
                        <text v-if="item.distance < 1000">最近自提门店距您{{ item.distance }}m</text>
                        <text v-if="item.distance >= 1000">最近自提门店距您{{ item.newdistance }}km</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 盲盒活动 -->
        <block v-if="isOver">
            <van-overlay :show="showFloat">
                <view class="wrapper">
                    <view class="wrapperbox">
                        <view class="centers" @tap.stop.prevent="mpsj">
                            <image v-if="!isColse" @tap="goDetail" class="headimg" mode="aspectFill" :src="imgs[0]">
                            </image>
                            <image v-else class="headimg" mode="aspectFill" :src="imgs[1]"></image>
                        </view>
                        <van-icon class="btn_close" name="close" @tap.native.stop.prevent="clickFloatClose" size="60rpx"
                            color="white" />
                    </view>
                </view>
            </van-overlay>
            <image class="btn_ft" @tap="clickFloatBtn" :src="btnImg"></image>
        </block>
    </view>
</template>

<script>
import vanField from '@/wxcomponents/vant/dist/field/index';
// pages/shopingmall/index.js
const app = getApp();

const _request = require('../../utils/request.js');

const moment = require('../../utils/moment.min');

var bgam = uni.createInnerAudioContext();
let lastClick = 0;
export default {
    components: {
        vanField
    },
    data() {
        return {
            mallimgUrl: app.globalData.mallimgUrl,
            banners: [],

            //轮播图片数组
            navbarInitTop: 0,

            isFixedTop: false,
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 2000,
            duration: 500,
            toolbarList: [],
            active: 1,
            goodslist: [],
            page: 0,
            isRelease: getApp().globalData.isRelease,

            //提审屏蔽部分模块, 防止发布不通过
            showFloat: false,

            isColse: false,
            isOver: false,
            imgs: [
                'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/ce9238d8515a46598a79194a2dcaa2fb-files?id=' + Math.random(),
                'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/e24a53bfb1d94a7d8e1c978fe69d59fd-files?id=' + Math.random()
            ],
            btnImg: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/icon_flow.png?id=' + Math.random(),
            countClick: 0,
            makerdetail: null,

            //创客价超出显示
            marker: '',

            makerObj: '',
            makerDetail: {}
        };
    },
    onShow: function () {
        this.loadGoodsList();
        this.setData({
            isOver: app.globalData.isOver
        });
        var that = this; // 是否创客

        if (uni.getStorageSync('userid')) {
            _request
                .get('/maker/checkIsMaker', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        makerObj: res.data.data
                    });
                    uni.setStorageSync('maker', res.data.data); // 是创客的时候才去获取详情

                    if (res.data.data && res.data.data.ismaker) {
                        // 获取用户创客信息
                        _request
                            .get('/maker/userMakerInfo', {
                                userId: uni.getStorageSync('userid')
                            })
                            .then((res) => {
                                let data = res.data.data;
                                let myupgrade = 0;

                                if (res.data.code == 200 && data) {
                                    // 计算当前升级所需人数
                                    data.makerUpRule.map((item, index) => {
                                        if (data.description == item.description && item.description != '传奇创客') {
                                            myupgrade = data.makerUpRule[index + 1].upgradeNum - data.downBuySum;
                                        } else if (data.description == '传奇创客') {
                                            myupgrade = 3000;
                                        }

                                        return item;
                                    });
                                    uni.setStorageSync('salesVolume', res.data.data.salesVolume);
                                    this.setData({
                                        makerDetail: { ...res.data.data, myupgrade }
                                    });
                                }
                            })
                            .catch((error) => {
                                console.log(error, 'error');
                            });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }

        if (that.navbarInitTop == 0) {
            //获取节点距离顶部的距离
            uni.createSelectorQuery()
                .select('#navbar')
                .boundingClientRect(function (rect) {
                    if (rect && rect.top > 0) {
                        var navbarInitTop = parseInt(rect.top) + 100;
                        console.log(navbarInitTop);
                        that.setData({
                            navbarInitTop: navbarInitTop
                        });
                    }
                })
                .exec();
        }
    },
    //监听页面滚动
    onPageScroll: function (e) {
        var that = this;
        var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
        //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断

        var isSatisfy = scrollTop >= that.navbarInitTop ? true : false; //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等

        if (that.isFixedTop === isSatisfy) {
            return false;
        }

        that.setData({
            isFixedTop: isSatisfy
        });
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.loadAdvertisingList();
        this.loadGoodsCategory(); // this.loadSubject()

        this.getLocation();
        this.setData({
            isOver: app.globalData.isOver
        });
        this.showActivity();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData({
            page: 1
        });
        this.loadGoodsList();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.loadGoodsList();
    },
    onHide: function () {
        // bgam?.pause()
    },
    methods: {
        // 查看详情创客卡
        getMarkerDetails() {
            uni.navigateTo({
                url: '/pages/maker/makerdetails/index?title=' + this.makerDetail.description
            });
        },

        goyidou() {
            uni.navigateTo({
                url: '/pagesb/index/index'
            });
        },

        //banner操作
        gotoNext: function (e) {
            const { item } = e.currentTarget.dataset;

            if (item.category == 2 && item.productSn) {
                //跳转商品详情
                uni.navigateTo({
                    url: '/shopingmall/goodsdetail/goodsdetail?productsn=' + item.productSn
                });
                return;
            }

            if (item.category == 3 && item.url) {
                if (item.url == '/firstpages/shopping/index') {
                    //商城
                    uni.switchTab({
                        url: item.url
                    });
                    return;
                }

                if (item.url == 'blind_box') {
                    //盲盒
                    if (this.isOver) {
                        uni.navigateTo({
                            url: '/pagesb/activity/detail'
                        });
                    }

                    return;
                }

                if (item.url === '/pages/maker/makerdetails/index') {
                    //拓客卡
                    let isMaker = uni.getStorageSync('maker')?.ismaker || false;

                    if (isMaker) {
                        uni.navigateTo({
                            url: item.url
                        });
                    } else {
                        uni.navigateTo({
                            url: '/pages/maker/buymaker/index'
                        });
                    }

                    return;
                }

                uni.navigateTo({
                    url: item.url
                });
            }

            if (item.category == 4 && item.url) {
                uni.navigateTo({
                    url: '/pagesb/webpage/index?url=' + encodeURIComponent(item.url)
                });
            }
        },

        //商品详情
        toDetail(e) {
            if (e.currentTarget.dataset.type == 2) {
                uni.navigateTo({
                    url: '/pagesb/detailed/detailed?productsn=' + e.currentTarget.dataset.productsn + '&goodsid=' + e.currentTarget.dataset.goodsid
                });
            } else {
                if (e.currentTarget.dataset.productsn) {
                    uni.navigateTo({
                        url: '/shopingmall/goodsdetail/goodsdetail' + this.getparams(e.currentTarget.dataset)
                    });
                }
            }
        },

        gotoShopcar() {
            uni.navigateTo({
                url: '/shopingmall/shopcar/shopcar'
            });
        },

        gotoItemIndex(e) {
            const { item } = e.currentTarget.dataset;

            if (item.name == '意豆专区') {
                this.goyidou();
            } else {
                uni.navigateTo({
                    url: '/shopingmall/itemindex/itemindex' + this.getparams(e.currentTarget.dataset)
                });
            }
        },

        gotoSearch: function () {
            uni.navigateTo({
                url: '/shopingmall/searchindex/searchindex'
            });
        },

        getparams: function (item) {
            const list = [];

            for (const key in item) {
                if (key === 'url') {
                    continue;
                }

                list.push(key + '=' + item[key]);
            }

            if (list.length) {
                return '?' + list.join('&');
            } else {
                return '';
            }
        },

        /**
         * 加载广告列表
         */
        loadAdvertisingList: function () {
            const that = this;

            _request
                .get(
                    '/banner/getList',
                    {
                        type: 4,
                        roles: 3
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        that.setData({
                            banners: res.data.data || []
                        });
                    }
                });
        },

        /**
         * 加载商品分类
         */
        loadGoodsCategory: function () {
            const that = this;

            _request
                .get(
                    '/mall-product-category/list',
                    {
                        offset: 0,
                        pageSize: 20
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    // console.log(res)
                    if (res.data.code === 200) {
                        let obj = {
                            icon: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/yidoushop.png',
                            name: '意豆专区',
                            fun: 'goyidou'
                        };
                        that.setData({
                            toolbarList: [...res.data.data, obj] || []
                        });
                    }
                });
        },

        /**
         * 加载专题列表
         */
        // loadSubject: function () {
        //   const self = this
        //   _request.postObj('/marketing/special/getlist', {}, app.globalData.mallType).then((res) => {
        //     // console.log(res)
        //     if (res.data.code === 200) {
        //       const list = res.data.data.rows || []
        //       self.setData({
        //         subject1: list[0],
        //         subject2: list[1],
        //         subject3: list[2]
        //       })
        //     }
        //   })
        // },
        // 授权定位权限
        getLocation() {
            console.log('定位');
            let location;
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    // 储存地址
                    location = res;
                    uni.setStorageSync('location', location);
                },
                fail: function (error) {
                    console.error(error);
                },
                complete: function (res) { }
            });
        },

        loadGoodsList: function () {
            const that = this; // this.setData({
            //   goodslist: []
            // })

            let latitude = uni.getStorageSync('location')?.latitude || 0;
            let longitude = uni.getStorageSync('location')?.longitude || 0;

            _request
                .get(
                    '/mall-product/list',
                    {
                        status: that.active,
                        offset: that.page,
                        pageSize: 20,
                        type: that.active == 5 ? 0 : 1,
                        userId: uni.getStorageSync('userId'),
                        latitude,
                        longitude
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    console.log(res);

                    if (res.data.code === 200) {
                        let list = res.data.data || [];
                        list.forEach((e) => {
                            // e.originalPrice = (e.originalPrice || 0).toFixed(2)
                            // e.price = (e.price || 0).toFixed(2)
                            e.distance = (parseInt(e.distance) / 1000).toFixed(2) * 1000;
                            e.newdistance = (Math.round(e.distance * 10) / 10000).toFixed(1);

                            if (e.priceMaker) {
                                let str = e.priceMaker.toString();

                                if (str.length > 6 || e.productType == 3) {
                                    e.marker = true;
                                } else {
                                    e.marker = false;
                                }
                            } else if (e.price) {
                                let price = e.price.toString();

                                if (price.length > 4 && e.productType == 3) {
                                    e.prices = true;
                                } else {
                                    e.prices = false;
                                }
                            }
                        });
                        console.log(list, 'list');
                        that.setData({
                            goodslist: that.page > 0 ? [...that.goodslist, ...list] : list
                        });
                    }
                });
        },

        queryListByType(e) {
            let index = e.currentTarget.dataset.index;
            this.setData({
                active: index,
                page: 0
            });
            this.loadGoodsList();
        },

        //创客大礼包
        toGiftPacks(e) {
            uni.navigateTo({
                url: '/shopingmall/markerlist/markerlist'
            });
        },

        //--------盲盒活动---------
        clickFloatBtn() {
            let that = this;
            that.setData({
                imgs: [
                    'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/ce9238d8515a46598a79194a2dcaa2fb-files?' + new moment().valueOf(),
                    'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/e24a53bfb1d94a7d8e1c978fe69d59fd-files?' + new moment().valueOf()
                ],
                showFloat: true
            });
            bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/coin.mp3';
            bgam.play();
        },

        clickFloatClose() {
            if (new moment().valueOf() - lastClick < 3000) {
                return;
            }

            lastClick = new moment().valueOf();
            this.setData({
                isColse: true
            });
            bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/click.mp3';
            bgam.play();
            let that = this;
            setTimeout(function () {
                that.setData({
                    imgs: ['', ''],
                    showFloat: false,
                    isColse: false
                });
                bgam.pause();
            }, 500);
        },

        goDetail() {
            let that = this;

            if (new moment().valueOf() - lastClick < 3000) {
                return;
            }

            lastClick = new moment().valueOf();
            bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/click.mp3';
            bgam.play();
            setTimeout(function () {
                that.setData({
                    imgs: ['', ''],
                    showFloat: !that.showFloat,
                    isColse: false
                });
                uni.navigateTo({
                    url: '../../pagesb/activity/detail'
                });
                bgam.pause();
            }, 500);
        },

        //是否显示悬浮活动
        showActivity() {
            // const lastDay = wx.getStorageSync('showtime') || ''
            // if(!lastDay || !moment().isSame(lastDay, 'day')){
            //   const day = new moment();
            //   wx.setStorageSync('showtime', day)
            if (this.isOver) {
                this.setData({
                    showFloat: true
                });
                bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/coin.mp3';
                setTimeout(function () {
                    bgam.play();
                }, 1500);
            } // }else{
            //   this.setData({
            //     countClick: this.data.countClick + 1
            //   })
            // }
        },

        mpsj() {
            console.log('占位：函数 mpsj 未声明');
        }
    }
};
</script>
<style>
page {
    background: #fbfbfb;
}

.totop {
    position: fixed;
}

.column {
    width: 100%;
    /* height: 80rpx; */
    /* display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around; */
    background: #fff;
    top: 0;
    left: 0;
    z-index: 100;
}

.swiper_box {
    width: 750rpx;
    height: 300rpx;
    box-shadow: 2px 4px 8px 0px #f5f5f5;
}

.swiper_img {
    width: 750rpx;
    height: 300rpx;
}

.search {
    width: 650rpx;
    height: 70rpx;
    background: #eeeeee;
}

.search_img1 {
    width: 28rpx;
    height: 28rpx;
}

.search_img2 {
    width: 60rpx;
    height: 60rpx;
}

.classify_box {
    width: 25%;
}

.classify_img {
    width: 80rpx;
    height: 80rpx;
}

.banner_img2 {
    width: 710rpx;
    height: 166rpx;
}

.bar_box {
    width: 60rpx;
    height: 6rpx;
    margin: 0 auto;
}

/* 列表样式 */
.goods_info {
    width: 340rpx;
    position: relative;
    box-shadow: 2px 4px 8px 0px #f5f5f5;
}

.goods_img {
    width: 340rpx;
    height: 340rpx;
}

.goods_sold {
    position: absolute;
    left: 0;
    bottom: 10rpx;
    line-height: 46rpx;
    border-radius: 0 20rpx 20rpx 0;
    background-color: rgb(0, 0, 0, 0.5);
}

.page-wrap {
    position: relative;
}

.markerpic {
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    padding: 0 10rpx;
}

/* 盲盒 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    width: 750rpx;
    display: flex;
    justify-content: center;
    height: 911rpx;
    top: -100rpx;
    position: relative;
}

.headimg {
    width: 720rpx;
    height: 640rpx;
}

.btn_ft {
    position: fixed;
    /* z-index: 99; */
    width: 112rpx;
    height: 136rpx;
    bottom: 120rpx;
    right: 20rpx;
}

.btn_close {
    position: absolute;
    width: 82rpx;
    height: 82rpx;
    bottom: 16rpx;
    left: calc(50% - 41rpx);
}

.column .flexs .padding-lr {
    min-width: max-content;
    text-align: center;
}
</style>
